<template>
    <div>
        <div id="main-wrapper">
            <div id="main-navbar" class="navbar navbar-inverse main_navbar" role="navigation">
                <!-- <button type="button" id="main-menu-toggle">
                    <i class="navbar-icon fa fa-bars icon"></i>
                    <span class="hide-menu-text">隐藏菜单</span>
                </button> -->
                <div class="navbar-inner">
                    <div class="navbar-header">
                        <i class="icon iconfont icon-multilayer"></i>
                        <a href="http://hsedu.iclass.cn/edu/back/index.html" class="navbar-brand main_navbar--a">
                            后台管理平台
                        </a>

                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse">
                            <i class="navbar-icon fa fa-bars"></i>
                        </button>
                    </div>

                    <div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
                        <div>
                            <div class="right clearfix">
                                <ul class="nav navbar-nav pull-right right-navbar-nav">
                                    <li class="dropdown">
                                        <a class="dropdown-toggle user-menu" data-toggle="dropdown">
                                            <span>admin</span>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a class="backloginout">
                                                    <i class="dropdown-icon fa fa-power-off"></i>&nbsp;&nbsp;退出</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="main-menu" role="navigation">
                <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
                    <div id="main-menu-inner" style="overflow: hidden; width: auto; height: 100%;">

                        <ul class="navigation">
                            <li class="mm-dropdown mm-dropdown-root open active">
                                <a href="http://hsedu.iclass.cn/edu/back/organizegrouplist#">
                                    <span class="mm-text mmc-dropdown-delay animated fadeIn">机构管理</span>
                                </a>
                                <ul class="mmc-dropdown-delay animated fadeInLeft">
                                    <li class=" active">
                                        <a tabindex="-1" href="http://hsedu.iclass.cn/edu/back/organizegrouplist">
                                            <i class="menu-icon fa fa-bank"></i>
                                            <span class="mm-text">值班管理表</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a tabindex="-1" href="http://hsedu.iclass.cn/edu/back/orgclassifypage">
                                            <i class="menu-icon fa fa-bank"></i>
                                            <span class="mm-text">机构分类</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="mm-dropdown mm-dropdown-root">
                                <a href="http://hsedu.iclass.cn/edu/back/organizegrouplist#">
                                    <span class="mm-text mmc-dropdown-delay animated fadeIn">课程管理</span>
                                </a>
                                <ul class="mmc-dropdown-delay animated fadeInLeft">
                                    <li>
                                        <a tabindex="-1" href="http://hsedu.iclass.cn/edu/back/courseClassify">
                                            <i class="menu-icon fa fa-th"></i>
                                            <span class="mm-text">分类管理</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a tabindex="-1" href="http://hsedu.iclass.cn/edu/back/addCoursePage">
                                            <i class="menu-icon fa fa-th"></i>
                                            <span class="mm-text">课程添加</span>
                                        </a>
                                    </li>

                                </ul>
                            </li>

                            <li class="mm-dropdown mm-dropdown-root">
                                <a href="http://hsedu.iclass.cn/edu/back/organizegrouplist#">
                                    <span class="mm-text mmc-dropdown-delay animated fadeIn">新闻管理</span>
                                </a>
                                <ul class="mmc-dropdown-delay animated fadeInLeft">
                                    <li>
                                        <a tabindex="-1" href="http://hsedu.iclass.cn/edu/back/newslist">
                                            <i class="menu-icon fa fa-cogs"></i>
                                            <span class="mm-text">添加和设置</span>
                                        </a>
                                        <!-- <a tabindex="-1" href="http://hsedu.iclass.cn/edu/back/hometeacher"><i class="menu-icon fa fa-users"></i><span class="mm-text">首页名师展示</span></a> -->
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 246px;"></div>
                    <div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>
                </div>
            </div>
            <div id="content-wrapper">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="table-light table-borrow">
                            <div class="table-header">
                                <div class="table-caption" style="display:inline-block;">
                                    值班管理表
                                    <a href="javascript:;" class="btn btn-info up__load" id="btnAddOrganizeGroup" style="margin-left:15px;">
                                        上传值班表
                                        <input type="file" name="" multiple @change="previewFile" id="input" class="upinput">
                                    </a>

                                </div>

                            </div>

                            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-page" id="">
                                <thead>
                                    <tr>
                                        <th style="width:5.5%;text-align:center">
                                            <input type="checkbox" name="events" @click="select()">
                                        </th>
                                        <th style="width:5.5%">序号</th>
                                        <th style="width:30%">值班表名称</th>
                                        <th style="width:25%">创建时间</th>
                                        <th style="width:25%">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="shown" v-for="(list,index) in wps" :key=index>
                                        <td class="organizeGroup-indexOrder" style="text-align:center">
                                            <input type="checkbox" name="events">
                                        </td>
                                        <td class="organizeGroup-groupName">
                                            {{Number(index)+1}}
                                        </td>
                                        <td class="organizeGroup-indexOrder">{{list.name}}</td>
                                        <td>
                                            <a target="_blank">{{list.lastModifiedDate}}</a>
                                        </td>
                                        <td>
                                            <a target="_blank" class="repeal repeal__bottom" style="background:red;color:white" @click="selfDel(index)">删除</a>
                                            <a href="javascript:;" class="repeal organizeGroup-edit repeal__bottom">查看</a>
                                            <a href="javascript:;" class="repeal organizeGroup-updateFreeze repeal__bottom">编辑</a>

                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                            <div class="table-footer">

                                <div class="div-page">
                                    <ul class="pagination">
                                        <li class="disabled page__list trans">
                                            <i class="icon iconfont icon-youjiantou"></i>
                                        </li>
                                        <!-- active -->
                                        <li class="disabled page__list number">
                                            1
                                        </li>
                                        <li class="active page__list">
                                            <i class="icon iconfont icon-youjiantou"></i>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="del" @click="wholeDel()">删除</a>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div id="main-menu-bg"></div>
            </div>
        </div>
    </div>
</template>

<script>
import jquery from "../assets/js/backStage/jquery.min.js";
import page from "../assets/js/backStage/page.js";
// import  pixelAdmin from '../assets/js/backStage/pixel-admin.js';

export default {
  data() {
    return {
      wps: []
    };
  },
  methods: {
    wholeDel() {
      var items = document.getElementsByName("events");
      for (var i = items.length; i > 0; i--) {
        var index = i - 1;
        if (items[index].checked) {
          items[index].checked = false;
          this.wps.splice(index - 1, 1);
        }
      }
      //     for(var i = 3; i>0;i--){
      // console.log(i) 3 2 1
      //     }
    },
    selfDel(index) {
      this.wps.splice(index, 1);
    },
    select() {
      var items = document.getElementsByName("events");
      if (items[0].checked) {
        for (var i = 1; i < items.length; i++) {
          //当前checkbox实现勾选
          items[i].checked = true;
        }
      } else {
        for (var i = 0; i < items.length; i++) {
          items[i].checked = false;
        }
      }
    },
    previewFile(even) {
      let files = document.getElementById("input").files;
      this.wps.push(...files);
      console.log(this.wps);
    }
  }
};
</script>

<style lang="scss" scoped>
.btn {
  position: relative;
}
.upinput {
  width: 106px;
  height: 31px;
  opacity: 0;
  position: absolute;
  left: 0;
}
.del {
  display: block;
  background: #097dd9;
  color: white;
  width: 78px;
  height: 29px;
  text-align: center;
  border-radius: 8px;
  line-height: 27px;
  margin-left: 15px;
}
.page__list {
  border: 1px solid #e4e4e4;
  width: 32px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}
.number {
  background: #097dd9;
  color: white;
  margin: 0 3px;
}
.trans {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* Internet Explorer */
  -moz-transform: rotate(180deg); /* Firefox */
  -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
  -o-transform: rotate(180deg); /* Opera */
  line-height: 23px;
}
</style>

